<!--
 * @Author: 孙文豪
 * @Description: 新增商品信息弹窗
 * @Date: 2024-03-25 15:02:04
 * @LastEditTime: 2024-06-27 10:43:04
 * @LastEditors: 孙文豪
-->
<template>
  <swh-drag-box
    :title="isEdit ? '编辑客户信息' : '新增客户'"
    :zIndex="99"
    :top="'200px'"
    :isMask="true"
    :isPadding="false"
    @closePortability="close"
    @confirmDarg="confirmBox"
  >
    <div class="other-add">
      <div class="personal-info">
        <div class="input-box">
          <span class="text">客户名称：</span>
          <input
            class="jxc-input"
            :class="{ required: requiredlist.includes('customerName') }"
            type="text"
            maxlength="10"
            placeholder="请输入客户名称"
            v-model.trim="customerName"
          />
        </div>
        <div class="input-box">
          <span class="text">客户地址：</span>
          <input
            class="jxc-input"
            :class="{ required: requiredlist.includes('customerAddress') }"
            type="text"
            maxlength="20"
            placeholder="请输入客户地址"
            v-model.trim="customerAddress"
          />
        </div>
        <div class="input-box">
          <span class="text">客户电话：</span>

          <input
            class="jxc-input"
            :class="{ required: requiredlist.includes('customerPhone') }"
            type="text"
            maxlength="11"
            placeholder="请输入客户电话"
            v-model.trim="customerPhone"
          />
        </div>
        <div class="input-box">
          <span class="text">客户备注信息：</span>
          <textarea
            maxlength="100"
            v-model.trim="customerRemarks"
            class="jxc-input-text"
            placeholder="客户备注（上限100字符）"
          ></textarea>
        </div>
      </div>
    </div>
  </swh-drag-box>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { integer } from '@/utils/common.js';
import { customerTableConfig } from './customer.js';
export default {
  name: '',
  props: {
    editObject: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  setup(props, ctx) {
    const other = reactive({
      customerTableConfig,
      requiredlist: [],
      isEdit: false
    });
    const data = reactive({
      id: '', //商品id  存在时编辑，不存在是新增
      customerName: '', //商品名称
      customerAddress: '', //商品名称
      customerPhone: '', //商品查询码
      customerRemarks: '', //描述
      transactionNum: 0, //订单数量
      totalAmount:0, //累计金额
      arrears:0 //欠款金额
    });
    onBeforeMount(() => {});
    onMounted(() => {
      if (JSON.stringify(props.editObject) !== '{}') {
        Object.assign(data, props.editObject);
      }
      // 判断是新增还是编辑
      other.isEdit = Boolean(data.id);
      // 获取必填的字段数组
      other.customerTableConfig.forEach((item) => {
        if (item.required) {
          other.requiredlist.push(item.dataIndex);
        }
      });
    });

    const close = () => {
      ctx.emit('close');
    };
    // 点击确认增加或者编辑
    const confirmBox = () => {
      let bool = true; //控制必填验证
      try {
        other.customerTableConfig.forEach((item) => {
          if (item.required) {
            if (!data[item.dataIndex]) {
              // 这里没有内容
              throw new Error(item.name);
            }
          }
        });
      } catch (name) {
        bool = false;
        Message({
          type: 'warning',
          content: `请输入${name.message}`
        });
      }

      if (!bool) return;
      // 新增时，增加id
      if (!data.id) {
        // 新增 增加id
        data.id = `customer_${Date.now().toString(16)}`;
      }
      ctx.emit('confirmBox', data);
      close();
    };
    return {
      // getImageUrl,
      confirmBox,
      close,
      ...toRefs(data),
      ...toRefs(other)
    };
  }
};
</script>
<style scoped lang="less">
.other-add {
  width: 700px;
  .personal-info {
    width: 100%;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    .input-box {
      overflow: hidden;
      float: left;
      margin-right: 30px;
      margin-bottom: 20px;
      position: relative;
      .text {
        float: left;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: @HSB;
        width: 100px;
      }
      .jxc-input {
        float: left;
        width: 200px;
        height: 32px;
        padding: 0 10px;
        border-radius: 4px;
        box-sizing: border-box;
        background: #fff;
        line-height: 32px;
        outline: none;
        border: 1px solid @HSD;
        &.required {
          &::-webkit-input-placeholder {
            color: @CS;
          }
        }
        &:focus {
          border: 1px solid @TSA;
        }
        &::-webkit-input-placeholder {
          color: @HSD;
        }
      }
      .other-img {
        width: 200px;
      }
      .jxc-input-text {
        float: left;
        width: 530px;
        height: 76px;
        padding: 0 10px;
        border-radius: 4px;
        box-sizing: border-box;
        background: #fff;
        line-height: 24px;
        outline: none;
        border: 1px solid @HSD;
        resize: none;
        &::-webkit-input-placeholder {
          font-size: 14px;
          font-family: 'serif';
        }
        &::-webkit-scrollbar {
          width: 3px;
        }
      }
    }
  }
}
</style>
